<template>
    <el-divider/>
    <span>患者信息：</span>
    <el-tag class="ml-2">姓名：{{ patientInfo.realName }}</el-tag>
    <el-tag class="ml-2">病历号：{{ patientInfo.caseNumber }}</el-tag>
    <el-tag class="ml-2">年龄：{{ patientInfo.age }}</el-tag>
    <el-tag class="ml-2">性别：{{ patientInfo.gender }}</el-tag>
    <el-divider/>
    <el-icon>
        <DocumentChecked/>
    </el-icon>
    <span>检查结果</span>
    <el-divider/>
    <el-table
            ref="singleTableRef"
            :data="techInfoList"
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
            colum
    >
        <el-table-column property="techCode" label="检查编码" width="200"/>
        <el-table-column property="techName" label="检查名称" width="300"/>
        <el-table-column property="techFormat" label="规格"/>
        <el-table-column property="techPrice" label="单价"/>
        <el-table-column property="priceType" label="费用分类"/>
    </el-table>
    <el-divider/>
    <div>检查结果详情：</div>
    <table class="base-info">
        <tr>
            <td>开立时间</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkReqInfo.creationTime }}</el-tag>
            </td>
        </tr>
        <tr>
            <td>检查医生</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkDocInfo.realname }}</el-tag>
            </td>
        </tr>
        <tr>
            <td>检查部位</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkReqInfo.checkPosition }}</el-tag>
            </td>
        </tr>
        <tr>
            <td>目的要求</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkReqInfo.checkInfo }}</el-tag>
            </td>
        </tr>
        <tr>
            <td>医嘱备注</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkReqInfo.checkRemark }}</el-tag>
            </td>
        </tr>
        <tr>
            <td>检查结果</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkReqInfo.checkResult }}</el-tag>
            </td>
        </tr>
        <tr>
            <td>检查时间</td>
            <td colspan="6">
                <el-tag class="ml-2" type="info">{{ checkReqInfo.checkTime }}</el-tag>
            </td>
        </tr>
    </table>
    <el-divider/>
    <el-button type="primary" @click="patientDiagnosis">门诊确诊</el-button>
</template>

<script setup>

import {DocumentChecked} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

import {ref, reactive, provide} from "vue";
import axios from "axios";
import router from "../../router/index.js";

const caseNumber = useRoute().query.caseNumber;

axios.defaults.baseURL = "http://localhost:8092/"
provide("axios", axios)
const checkReqInfo = ref({})
//患者信息
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    age: '',
    gender: ''
})
// 判断是否选择患者
if (caseNumber == undefined) {
    window.alert("请选择病历")
} else {
    //根据患者病历号查询患者信息
    axios({
        method: 'get',
        url: 'register/queryPatientByCaseNum/' + caseNumber
    }).then(resp => {
        patientInfo.value = resp.data.data
        console.log(patientInfo.value)
        if (resp.data.success) {
            queryPatientTech()
        }
    })
}
//患者已经执行完检查的医技项目列表
const techInfoList = ref([])
//选择检查项目临时列表
const selectTemp = ref({})
//进行检查的医生信息
const checkDocInfo = ref({})


function queryPatientTech(val) {
    console.log(val)
    axios({
        method: 'get',
        url: 'checkRequest/queryCheckById/' + patientInfo.value.id + '/已出结果'
    }).then(resp => {
        techInfoList.value = resp.data.data
        console.log(techInfoList.value)
    })
}

function handleCurrentChange(val) {
    selectTemp.value = val
    console.log(selectTemp.value)
    axios({
        method: 'get',
        url: 'checkRequest/queryCheckReqById/' + val.checkRequestId
    }).then(resp => {
        console.log(resp.data.data)
        checkReqInfo.value = resp.data.data
        if (resp.data.success) {
            queryEmpById()
        }
    })
}

function queryEmpById() {
    axios({
        method: 'get',
        url: 'employee/queryEmpById/' + checkReqInfo.value.checkEmployeeId
    }).then(resp => {
        checkDocInfo.value = resp.data.data
        console.log(resp.data.data)
    })
}

function patientDiagnosis() {
    router.push({
        path: '/outpatient_diagnosis',
        query:{
            caseNumber:patientInfo.value.caseNumber
        }
    })
}
</script>

<style scoped>
.base-info {
    width: 100%;
}

.base-info table {
    width: 100%;
    margin: 15px 0;
    border: 0;
}

.base-info th {
    font-weight: bold;
    background-color: #c6ebfe;
    color: #2073fe
}

.base-info, .base-info th, .base-info td {
    font-size: 0.95em;
    padding: 1.1vw;
    border-collapse: collapse;
}

.base-info th {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info td {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info tr {
    border: 1px solid #ffffff;
}

.base-info tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.base-info tr:nth-child(even) {
    background-color: #ffffff;
}

.base-info tr td:nth-child(1) {
    width: 5vw;
}

</style>